import { ref, reactive, shallowRef } from 'vue'
import API from "@/api";
import { ElMessage } from 'element-plus'
// 菜单实例
export const menuRef = shallowRef(null)
// 菜单数据
const menuList = ref([])
const menuIndex = ref(0)

// 校验规则
export const rules = reactive({
    name: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        },
        {
            min: 1,
            max: 12,
            message: '长度限制12个字符',
            trigger: ['blur', 'change']
        }
    ],
    menuType: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        }
    ],
    visitType: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        }
    ],
    url: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        }
    ],
    appId: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        }
    ],
    pagePath: [
        {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change']
        }
    ]
})

export const useMenuOa = (ref) => {
    if (ref) menuRef.value = ref

    // 添加主菜单
    const handleAddMenu = () => {
        menuList.value.push({
            name: '菜单名称',
            has_menu: false,
            type: 'view',
            url: '',
            appid: '',
            pagepath: '',
            sub_button: []
        })
    }

    // 添加子菜单
    const handleAddSubMenu = (event) => {
        const index = menuIndex.value
        if (menuList.value[index].sub_button.length >= 5) {
            this.$alert('已添加上限～', "提示", {type: 'error'})
            return
        }
        menuList.value[index].sub_button.push(event)
    }

    // 编辑子菜单
    const handleEditSubMenu = (event, subIndex) => {
        const index = menuIndex.value
        menuList.value[index].sub_button[subIndex] = event
    }

    // 删除主菜单
    const handleDelMenu = (index) => {
        if (index !== 0) {
            menuIndex.value--
        }
        menuList.value.splice(index, 1)
    }

    // 删除子菜单
    const handleDelSubMenu = (index, subIndex) => {
        menuList.value[index].sub_button.splice(subIndex, 1)
    }

    // 获取菜单
    const getOaMenuFunc = async () => {
        try {
            var res = await API.setting.wx_oa.getOaMenu.get()
            if(res.code == 1){
                menuList.value = res.data
            }
            
        } catch (error) {
            console.log('获取菜单=>', error)
        }
    }

    // 保存菜单
    const handleSave = async () => {
        // console.log(menuRef.value,'menuList.value')
        // const refs = menuRef.value.value
        // for (let i = 0; i < refs.length; i++) {
        //     try {
        //         await refs[i].menuFormRef.validate()
        //     } catch (error) {
        //         menuIndex.value = i
        //         return
        //     }
        // }
        let res = await API.setting.wx_oa.setOaMenuSave.post(menuList.value)
        if(res.code == 1){
            ElMessage({
                message: '操作成功',
                type: 'success',
              })
        }else{
            ElMessage.error(res.message)
        }
    }

    // 发布菜单
    const handlePublish = async () => {
        // const refs = menuRef.value.value
        // for (let i = 0; i < refs.length; i++) {
        //     try {
        //         await refs[i].menuFormRef.validate()
        //     } catch (error) {
        //         menuIndex.value = i
        //         return
        //     }
        // }
        let res = await API.setting.wx_oa.setOaMenuPublish.post(menuList.value)
        if(res.code == 1){
            ElMessage({
                message: '操作成功',
                type: 'success',
              })
        }else{
            ElMessage.error(res.message)
        }
    }

    return {
        menuList,
        menuIndex,
        handleAddMenu,
        handleAddSubMenu,
        handleEditSubMenu,
        handleDelMenu,
        handleDelSubMenu,
        getOaMenuFunc,
        handleSave,
        handlePublish
    }
}